@import "common";
html,body{
    height: 100%;
}
@mixin img{
    img{
        overflow: hidden;
        position: absolute;
        width: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}
@mixin img1{
    img{
        overflow: hidden;
        position: absolute;
        width: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}

       .web{
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #bf0c21 url(../img/di.png) no-repeat;
            position: relative;
          .cont{
              height: 100%;
              width: 100%;
              position: relative;
              top: 0;
              left: 50%;
              transform: translate(-50%);
              overflow: auto;
              .head{
                padding-top: r(8);
                width: 100%;
                padding-bottom: r(5);
                p{
                    font-size: r(30);
                    text-align: center;
                    color: #e7c598;
                    font-weight: bold;
                }
                span{
                    min-width: r(20);
                    border-bottom: solid 1px #e7c598;
                }
            }
           .yuan{
              width: 100%;
              height: r(264);
              margin: 0 auto;
              position: relative;
              overflow: hidden;
//            transition: all 0.5s; 
              transition: transform  0.5s; 
          .yuan_one1{
              width: r(122);
              height: r(122);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(70);
              left: 50%;
              transform: translate(-50%);
              text-align: center;
              line-height: r(122);
              font-size: r(25);
              color: #bf0c21;
              box-shadow: 3px 5px 5px #231815;
          }
          .yuan_two{
              width: r(48);
              height: r(48);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(-65);
              left: 50%;
              transform: translate(-50%);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
          .yuan_theve{
              width: r(48);
              height: r(48);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(-20);
              left: r(127);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
          .yuan_four{
              width: r(48);
              height: r(48);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(85);
              left: r(127);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
          .yuan_five{
              width: r(48);
              height: r(48);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(140);
              left: 50%;
              transform: translate(-50%);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
          .yuan_six{
              width: r(48);
              height: r(48);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(-20);
              left: r(-60);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
          .yuan_three{
              width: r(48);
              height: r(48);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(85);
              left: r(-60);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
      }
      
      
      .yuan2{
              padding: 0;
              margin: 0;
              width: 49%;
              height: r(87);
              position: relative;
              margin-bottom: r(100);
              display: inline-block;
              box-sizing: border-box;
              transition: all 0.5s;
              img{
                  width: 80%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%,-50%);
               }
          .yuan_one{
              width: r(87);
              height: r(87);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              text-align: center;
              line-height: r(87);
              font-size: r(22);
              color: #bf0c21;
              box-shadow: 3px 5px 5px #231815;
              
          }
          .yuan_two{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(-45);
              left: r(30);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
          .yuan_theve{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(-10);
              left: r(85);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
          .yuan_four{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(68);
              left: r(85);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
          .yuan_five{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(100);
              left: r(30);
              overflow: hidden;
              @include img;
              box-shadow: 2px 3px 5px #231815;
          }
          .yuan_six{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(68);
              left: r(-35);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
          .yuan_three{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(-10);
              left: r(-35);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img;
          }
      }
      .yuan3{
              padding: 0;
              margin: 0;
              width: 47%;
              height: r(193);
              position: relative;
              float: right;
              img{
                  width: 80%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%,-50%);
               }
          .yuan_one{
              width: r(87);
              height: r(87);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(42);
              right: r(115);
              text-align: center;
              line-height: r(87);
              font-size: r(22);
              color: #bf0c21;
              box-shadow: 3px 5px 5px #231815;
              
          }
          .yuan_two{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(0);
              right: r(143);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img1;
          }
          .yuan_theve{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(34);
              right: r(202);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img1;
          }
          .yuan_four{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(102);
              right: r(202);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img1;
          }
          .yuan_five{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(135);
              right: r(143);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img1;
          }
          .yuan_six{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(102);
              right: r(82);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img1;
          }
          .yuan_three{
              width: r(35);
              height: r(35);
              border-radius: 50%;
              background: #e7c598;
              position: absolute;
              top: r(34);
              right: r(82);
              box-shadow: 2px 3px 5px #231815;
              overflow: hidden;
              @include img1;
          }
          .clear{
              clear: both;
          }
      }
      .dbu{
          width: 100%;
          height: r(90);
          position: relative;
          .x{
              width: r(350);
              height: r(66);
              margin:  0 auto;
              overflow: hidden;
              position: relative;
              img{
                  width: 100%;
                  position: absolute;
                  top: -999px;
                  left: -999px;
                  right: -999px;
                  bottom: -999px;
                  margin: auto;
              }
          }
          p{
              font-size: r(25);
              text-align: center;
              color: #e7c598;
              font-weight: bold;
          }
          .tub{
              width: r(41);
              height: r(41);
              border-radius: 50%;
              float: right;
              position: absolute;
              right: r(20);
              bottom: r(5);
              img{
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%,-50%);
              }
      }
      }
      
    } 
     
}
.tan{
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    .c{
        width: r(413);
        height: r(250);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: #e7c598;
        border-radius: 15px;
        p{
            text-align: center;
            padding-top: r(10);
            color: #bf0c21;
        }
        p:first-of-type{
            padding-top: r(50);
        }
        .t{
            width: r(36);
            height: r(36);
            border-radius: 50%;
            position: absolute;
            top: r(11);
            right: r(16);
        img{
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%,-50%);
            }
    }
    }
}
            .w{
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  background: #bf0c21 url(../img/di.png) no-repeat;
                  top: 0;
                  left: 0;
                  z-index: 99;
                  overflow: hidden;
            }
            .j{
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                overflow: hidden;

            }
